<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span style="border-left: 6px solid #409eff; padding-left: 8px">常用联系人</span>
      </div>

      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="searchInput" placeholder="请输入关键字搜索"></el-input>
        </el-col>
        <el-col :span="10">
          <el-button type="primary" @click="addPassenger">新增乘机人</el-button>
          <el-button type="danger" @click="batchDelete" v-show="selected.length > 0">批量删除</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="filteredTableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="paxName" label="姓名"></el-table-column>
        <el-table-column prop="paxPhone" label="手机号" :formatter="filterPhone"></el-table-column>
        <el-table-column prop="certificateType" label="证件类型">
          <template slot-scope="scope">{{ certificateTypeMap[scope.row.certificateType] }}</template>
        </el-table-column>
        <el-table-column prop="certificateNo" label="证件号码" :formatter="filterCertificateNo"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editPassenger(scope.$index)">编辑</el-button>
            <el-button type="text" @click="deletePassenger(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="dialogVisible" title="编辑乘机人" width="500px">
        <el-form :model="currentPassenger" ref="form" :rules="rules" label-width="100px">
          <el-form-item label="姓名" prop="paxName">
            <el-input v-model="currentPassenger.paxName"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="paxPhone">
            <el-input v-model="currentPassenger.paxPhone"></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="certificateType">
            <el-select v-model="currentPassenger.certificateType" placeholder="请选择">
              <el-option
                v-for="(item, key) in certificateTypeMap"
                :key="key"
                :label="item"
                :value="key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="certificateNo">
            <el-input v-model="currentPassenger.certificateNo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template> 
  <script>
export default {
  data() {
    return {
      //当前搜索框中文字
      searchInput: "",
      // 数据列表
      tableData: [
        {
          id: "1",
          paxName: "张三",
          paxPhone: "13800138000",
          certificateType: "1",
          certificateNo: "440103198712345678",
        },
        {
          id: "2",
          paxName: "张er",
          paxPhone: "14800138000",
          certificateType: "1",
          certificateNo: "440103198712345678",
        },
      ],
      // 证件类型映射表
      certificateTypeMap: {
        1: "身份证",
        2: "护照",
        3: "港澳通行证",
        4: "台湾通行证",
      },
      // 编辑乘机人弹窗是否可见
      dialogVisible: false,
      // 当前正在编辑的乘机人数据
      currentPassenger: {},
      // 表单验证规则
      rules: {
        paxName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        paxPhone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        certificateType: [
          { required: true, message: "请选择证件类型", trigger: "blur" },
        ],
        certificateNo: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
          { validator: this.validateCertificateNo, trigger: "blur" },
        ],
      },
      // 批量选中的数据
      selected: [],
    };
  },
  methods: {
    // 新增乘机人
    addPassenger() {
      this.dialogVisible = true;
      this.currentPassenger = {};
    },
    // 编辑乘机人
    editPassenger(index) {
      this.dialogVisible = true;
      this.currentPassenger = Object.assign({}, this.tableData[index]);
    },
    // 删除单个乘机人
    deletePassenger(index) {
      this.tableData.splice(index, 1);
      this.$message({
        type: "success",
        message: "删除成功",
      });
    },
    // 批量删除
    batchDelete() {
      let indexes = this.selected
        .map((item) => this.tableData.indexOf(item))
        .sort((a, b) => b - a);
      indexes.forEach((index) => {
        this.tableData.splice(index, 1);
      });
      this.selected = [];
      this.$message({
        type: "success",
        message: "删除成功",
      });
    },
    // 表单验证器：证件号码
    validateCertificateNo(rule, value, callback) {
      if (
        this.currentPassenger.certificateType === "1" &&
        !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
      ) {
        callback(new Error("证件号码格式不正确"));
      } else if (
        this.currentPassenger.certificateType === "2" &&
        !/^[a-zA-Z0-9]*$/.test(value)
      ) {
        callback(new Error("证件号码格式不正确"));
      } else {
        callback();
      }
    },
    // 弹窗提交
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.currentPassenger.id) {
            // 编辑乘机人
            let index = this.tableData.findIndex(
              (item) => item.id === this.currentPassenger.id
            );
            this.tableData.splice(index, 1, this.currentPassenger);
            this.$message({
              type: "success",
              message: "编辑成功",
            });
          } else {
            // 新增乘机人
            this.tableData.push(
              Object.assign({}, this.currentPassenger, { id: Date.now() })
            );
            this.$message({
              type: "success",
              message: "新增成功",
            });
          }
          this.dialogVisible = false;
        }
      });
    },
    // 表格选择变化
    handleSelectionChange(selection) {
      this.selected = selection;
    },

    filterPhone(value) {
      //手机号过滤规则
      const phone = value.paxPhone;
      if (!phone) return "";
      const phoneNew = phone.slice(0, 3) + "*".repeat(6) + phone.slice(-2);
      return `${phoneNew}`;
    },
    filterCertificateNo(value) {
      //身份证号过滤规则
      const certificateNo = value.certificateNo;
      if (!certificateNo) return "";
      const certificateNoNew =
        certificateNo.slice(0, 3) + "*".repeat(13) + certificateNo.slice(-2);
      return `${certificateNoNew}`;
    },
  },
  computed: {
    filteredTableData() {
      //列表数据过滤，根据搜索框条件
      return this.tableData.filter((item) => {
        return (
          item.paxName.indexOf(this.searchInput) !== -1 ||
          item.paxPhone.indexOf(this.searchInput) !== -1 ||
          item.certificateNo.indexOf(this.searchInput) !== -1
        );
      });
    },
  },
};
</script>
<style scoped>
/* 卡片样式 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>